<template>
  <view :class="[
    ns.b(),
    disabled ? ns.m('disabled') : '',
    readonly ? ns.m('readonly') : '',
  ]">
    <text v-if="readonly">{{ getReadonly() }}</text>
    <i-biz-input-base
      v-else
      ref='inputRef'
      v-model="currentVal"
      :placeholder="controller.placeHolder"
      :type="type"
      :showPassword="type === 'password'"
      @input="handleChange"
      @keyup="handleKeyUp"
      @blur="onBlur"
      @focus="onFocus"
      :class="ns.b('input')"
      :disabled="disabled"
    >
      <template v-if="c.parent.unitName" #suffix>
        <i :class="ns.e('unit')">{{c.parent.unitName}}</i>
      </template>
    </i-biz-input-base>
  </view>
</template>
<script lang="ts">
export default {
  options: {
    addGlobalClass: true,
    virtualHost: true,
    styleIsolation: "shared"
  }
}
</script>
<script setup lang="ts">
import { computed, ref, watch } from "vue";
import { debounce } from "lodash-es";
import { TextBoxEditorController } from "../i-biz-text-box-editor.controller";
import { getEditorEmits, getInputProps } from "@/props";
import { useNamespace } from "@/use";

const props = defineProps(getInputProps<TextBoxEditorController>());
const emit = defineEmits(getEditorEmits());

const ns = useNamespace("input");
const c = props.controller;
const editorModel = c.model;
const inputRef = ref();

// 类型
const type = computed(() => {
  switch (editorModel.editorType) {
    case "MOBTEXT":
      return "text";
    case "MOBPASSWORD":
      return "password";
    default:
      return "text";
  }
});

const currentVal = ref<string | number>("");

watch(
  () => props.value,
  (newVal, oldVal) => {
    if (newVal !== oldVal) {
      if (!newVal) {
        currentVal.value = "";
      } else {
        currentVal.value = newVal;
      }
    }
  },
  { immediate: true }
);

let isDebounce = false;
let awaitSearch: () => void;
let blurCacheValue: string | undefined;
// 防抖值变更回调
const debounceChange = debounce(
  (val: string | number) => {
    // 拦截掉blur触发后change
    if (blurCacheValue !== val) {
      emit("change", val);
    }
    blurCacheValue = undefined;
    isDebounce = false;
    if (awaitSearch) {
      awaitSearch();
    }
  },
  300,
  { leading: true }
);
// 值变更
const handleChange = (evt: IData) => {
  const val = evt.value;
  isDebounce = true;
  debounceChange(val);
};

const handleKeyUp = (e: KeyboardEvent) => {
  if (e && e.code === "Enter") {
    if (isDebounce) {
      awaitSearch = () => {
        inputRef.value.$el.dispatchEvent(e);
      };
    }
  }
};

/**
 * blur时马上抛值变更
 * @author lxm
 * @date 2023-03-06 06:36:23
 */
const onBlur = (event: IData) => {
  blurCacheValue = event.value;
  emit("change", blurCacheValue);
  emit("blur");
};

// 自动聚焦
if (props.autoFocus) {
  watch(inputRef, (newVal) => {
    if (newVal) {
      const inputTag = "input";
      const input = newVal.$el.getElementsByTagName(inputTag)[0];
      input.focus();
    }
  });
}
const onFocus = () => {
  emit("focus");
};

const getReadonly = () => {
  // 只读显示
  let content = `${currentVal.value || ''}`;
  const { unitName } = c.parent;
  // 当有值且单位存在时才显示单位
  if (content && unitName) {
    content += unitName;
  }
  return content;
}
</script>
<style lang="scss">
@import "./i-biz-input.scss";
</style>